<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
        name="viewport">
  <title>微信公众号授权登录--测试页</title>
  <!-- 引入样式文件 -->
  <link href="https://unpkg.com/vant@2.5.8/lib/index.css" rel="stylesheet">

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vant@2.5.8/lib/vant.min.js"></script>
  <!-- axios -->
  <script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>

</head>
<body>

<div id="app">
  <van-button type="primary" block @click="oauth2buildAuthorizationUrl">微信公众号授权登录</van-button>
  <div v-html="successJson"></div>
</div>
<script>
    // 在 #app 标签下渲染一个组件
    new Vue({
        el: '#app',
        data() {
            return {
                successJson: ''
            }
        },
        mounted (){
            this.login()
        },
        methods: {
            getUrlParam (name, url) {
                //构造一个含有目标参数的正则表达式对象
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r;
                if (url) {
                    r = url.substr(url.indexOf("?"));
                } else {
                    r = window.location.search;
                }
                //匹配目标参数
                r = r.substr(1).match(reg);
                this.successJson += JSON.stringify(r) + '<br/><hr/>'
                //返回参数值
                if (r != null){
                    return decodeURI(r[2])
                }
                return null;
            },
            // 首先签名地址
            oauth2buildAuthorizationUrl(){
                const toast = vant.Toast.loading({
                    duration: 0, // 持续展示 toast
                    forbidClick: true,
                    message: '签名中',
                });
                let url = window.location.href
                if(window.location.search){
                    url = url.replace(window.location.search,'')
                }
                axios.get('/api/wx/mp/oauth2/ywPersonalTest/oauth2buildAuthorizationUrl',{params:{url:url}}).then(res=>{
                    let oauth2buildAuthorizationUrl = res.data
                    this.successJson += oauth2buildAuthorizationUrl + '<br/><hr/>'
                    window.location.href = oauth2buildAuthorizationUrl
                }).catch(error=>{
                    this.successJson += JSON.stringify(error) + '<br/><hr/>'
                }).finally(()=>{
                    vant.Toast.clear();
                })
            },
            // 重定向回来之后使用code登录
            login(){
                let code = this.getUrlParam('code')
                if (!code) {
                    return
                }
                const toast = vant.Toast.loading({
                    duration: 0, // 持续展示 toast
                    forbidClick: true,
                    message: '登录中',
                });
                this.successJson += window.location.href + '<br/><hr/><hr/>'
                axios.post('/api/oauth/token?scope=read&grant_type=wx_mp_code',
                    'appCode=ywPersonalTest&code=' + code,
                    {
                        headers:{
                            'Content-Type': 'application/x-www-form-urlencoded',
                            Authorization: 'Basic dGVzdF9jbGllbnQ6dGVzdF9zZWNyZXQ='
                        }
                    }).then(res => {
                    this.successJson += JSON.stringify(res.data) + '<br/><hr/>'
                    this.successJson += '登录成功' + '<br/><hr/>'
                }).catch(error=>{
                    this.successJson += JSON.stringify(error) + '<br/><hr/>'
                    if(error.response){
                        this.successJson += JSON.stringify(error.response.data) + '<br/><hr/>'
                    }
                }).finally(()=>{
                    vant.Toast.clear();
                })
            }
        }
    });
</script>
</body>
</html>